<template>
  <div id="app" @click="show = false">
    <router-view />
    <ul class="ball" v-if="ball">
      <transition name="fade">
        <router-link tag="li" to="/index" v-show="show">
          <span>首页</span>
        </router-link>
      </transition>
      <transition name="fade">
        <router-link tag="li" to="/message" v-show="show">
          <span>消息</span>
        </router-link>
      </transition>
      <transition name="fade">
        <router-link tag="li" to="/my" v-show="show">
          <span>我的</span>
        </router-link>
      </transition>
      <li @click.stop="show = !show" :class="{action: isAction}">
        <i class="iconfont" :class="show ? 'icon-guanbi' : 'icon-zengjia'"></i>
      </li>
    </ul>
    <perfect v-if="$store.state.verifyPhone"></perfect>
    <!-- $store.state.verifyPhone -->
    <inform v-if="$store.state.remind"></inform>
    <!-- $store.state.remind -->
  </div>
</template>

<script>
import perfect from "@/components/perfect";
import inform from '@/components/inform'
import { setTimeout, setInterval, clearTimeout } from 'timers';
export default {
  components: {
    perfect,
    inform
  },
  data() {
    return {
      navs: {
				index: '首页',
				interact: '闪测',
				consult: '咨询',
				shop: '开运',
				my: '我的',
      },
      show: false,
      isAction: true,
      time: null
    }
  },
  computed: {
    ball() {
      let name = this.$route.name.split('-')[0];
      return !this.navs[name] && name !== 'pay';
    },
  },
  methods: {
    handleScroll() {
      this.timer && clearTimeout(this.timer);
      this.isAction = true;
      this.timer = setTimeout(() => {
        this.isAction = false;
      }, 3000);
    },
    guanbi() {
      let local = window.localStorage.getItem('show')
      if(local == 'false' || this.$store.state.isMaster){
        this.$store.commit('remindchu', false);
      } else {
        this.$store.commit('remindchu', true);
      }
      if(this.$store.state.remindTime > 0){
        this.time = setInterval(() => {
          this.$store.state.remindTime --
          if(this.$store.state.remindTime <= 0) {
            clearTimeout(this.time)
            this.$store.commit('remindchu', false);
          }
        }, 1000)
      } else if (this.$store.state.remindTime <= 0){
        this.$store.commit('remindchu', false);
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.guanbi()
  }
};
</script>

<style lang="less">
@import "~vux/src/styles/1px";
@import "~vux/src/styles/close";
@import "./styles/normalize";
@import "./styles/common";
@import "./styles/login";
.vux-1px:before {
  .setLine(@bdColor);
}
.vux-1px-t:before {
  .setTopLine(@bdColor);
}
.vux-1px-b:after {
  .setBottomLine(@bdColor);
}
.vux-1px-tb {
  &:before {
    .setTopLine(@bdColor);
  }
  &:after {
    .setBottomLine(@bdColor);
  }
}
.vux-1px-l:before {
  .setLeftLine(@bdColor);
}
.vux-1px-r:after {
  .setRightLine(@bdColor);
}
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  min-height: 100vh;
}
html, body {
  height: 100%;
}
.view-full {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: @bgColor;
}
</style>

<style scoped lang="less">
.ball{
  position: fixed;
  bottom: 2.666667rem;
  right: .666667rem;
  width: 1.066667rem;
  height: 1.066667rem;
  line-height: 1.066667rem;
  li{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid @bdColor;
    box-shadow: 0 0 .266667rem .04rem rgba(0,0,0,0.2);
    span{
      font-size: .32rem;
    }
    .icon-zengjia{
      font-size: 2em;
    }
    &:active{
      background-color: @bdColor;
    }
    &:last-child{
      transition: all 0.5s;
      color: #ffffff;
      border-color: fadeout(@primary, 70%);
      background-color: fadeout(@primary, 70%);
      &.action{
        background-color: @primary;
      }
      &:active{
        background-color: darken(@primary, 5%);
      }
    }
    &:nth-child(1){
      transform: translateY(-450%);
    }
    &:nth-child(2){
      transform: translateY(-300%);
    }
    &:nth-child(3){
      transform: translateY(-150%);
    }
    &.fade-enter-active,
    &.fade-leave-active {
      transition: all 0.5s;
    }
    &.fade-enter,
    &.fade-leave-to {
      transform: translateY(0px);
      opacity: 0;
    }
  }
}
</style>

